<template>
    <div :class="{ 'full-screen': isFullScreen }">
        <yh-dialog
            :visible.sync="show"
            :modal="false"
            :fullscreen="isFullScreen"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="close"
            :drag="!isFullScreen"
            top="0"
            :key="key"
            :show-close="false"
        >
            <template slot="title">
                <div class="flex1">
                    <div class="title-icon"></div>
                    <span class="title-text">{{ getTitle() }}</span>
                </div>
                <div class="flex1">
                    <div :class="!isFullScreen ? 'el-icon-full-screen' : 'el-icon-minus'" class="btn1" @click="onFullScreen"></div>
                    <div class="btn2" @click="close"></div>
                </div>
            </template>
            <div
                :class="{
                    'top-content': ['特殊计算项', '分母', '动态维度', '动态维度模板'].includes(info.name),
                    content: !['特殊计算项', '分母', '动态维度', '动态维度模板'].includes(info.name),
                }"
            >
                <vxe-table
                    border
                    :cell-style="getCellStyle"
                    :sort-config="{
                        defaultSort: { field: sortProp, order: sortOrder, orders: ['desc', 'asc', null] },
                        remote: true,
                    }"
                    stripe
                    :filter-config="{ remote: true }"
                    @filter-change="handleFilter($event, 'detail')"
                    @sort-change="handleSort"
                    @cell-click="handleRow"
                    :data="tableData"
                    show-header-overflow
                    v-loading="loading"
                    class="table"
                    ref="tTable"
                    header-align="center"
                    highlight-current-row
                    highlight-hover-row
                >
                    <vxe-column
                        v-for="item in columns"
                        :field="item.val"
                        :title="item.name"
                        :key="item.val"
                        :filters="item.filters"
                        :min-width="item.minWidth || '90px'"
                        show-overflow="tooltip"
                        :sortable="item.val == 'paramDescDetail' ? false : true"
                    >
                        <template #filter="{ $panel, column }" v-if="!checkFiltersParams.includes(item.val)">
                            <div>
                                <el-input
                                    ref="searchInput"
                                    class="my-input"
                                    type="type"
                                    v-for="(option, index) in column.filters"
                                    :key="index"
                                    v-model="option.data"
                                    @input="$panel.changeOption($event, !!option.data, option)"
                                />
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <span v-if="item.type == 'func'" :style="getStyle(item.val, scope.row[item.val])">
                                {{ item.funcBody(scope.row[item.val]) || '--' }}
                            </span>
                            <span v-else-if="item.val == 'entryCount'" :style="getEntryCountStyle(scope.row['supported'], scope.row[item.val])">
                                {{ scope.row['supported'] == '0' ? '--' : getValue(scope.row[item.val]) }}
                            </span>

                            <span v-else-if="item.val == 'paramDescDetail'" :key="rowKey">
                                <!-- <span v-if="!scope.row['paramDescDetail'] || !scope.row['paramDescDetail'].length ">--</span>
                                <span v-if></span> -->
                                <el-tooltip placement="top">
                                    <div
                                        slot="content"
                                        v-if="scope.row.hasOwnProperty('paramDescDetail') && scope.row.paramDescDetail.length > 1"
                                        style="max-height: 200px; overflow: auto"
                                    >
                                        <div v-for="(item, index) in scope.row.paramDescDetail" :key="index">
                                            {{ item }}
                                        </div>
                                    </div>

                                    <el-tag
                                        v-if="scope.row.hasOwnProperty('paramDescDetail') && scope.row.paramDescDetail.length > 1"
                                        style="cursor: default"
                                    >
                                        {{ scope.row.paramDescDetail.length + '个参数' }}</el-tag
                                    >
                                </el-tooltip>
                                <span v-if="scope.row.hasOwnProperty('paramDescDetail') && scope.row.paramDescDetail.length === 1">
                                    {{ scope.row.paramDescDetail[0] }}
                                </span>
                                <span v-else-if="!scope.row.hasOwnProperty('paramDescDetail')">--</span>
                            </span>
                            <span v-else-if="info.name == '条目配置参数概况' && item.val == 'supported'">
                                <span v-if="scope.row[item.val] == 0" style="color: #a30014">{{ '不支持' }}</span>
                                <span v-else-if="scope.row[item.val] == 1" style="color: #70b603">{{ '支持' }}</span>
                                <span v-else-if="scope.row[item.val] == 2" style="color: #f5a43a">{{ '部分支持' }}</span>
                                <span v-else>--</span>
                            </span>
                            <span v-else>
                                {{ getValue(scope.row[item.val]) }}
                            </span>
                        </template>
                    </vxe-column>
                </vxe-table>
                <RiskPagination :paging="paging" @page-change="pageRet('detail')"></RiskPagination>
            </div>

            <div class="top-content" v-if="['特殊计算项', '分母', '动态维度', '动态维度模板'].includes(info.name)">
                <h2 style="margin:10px 0">相关条目:</h2>
                <vxe-table
                    border
                    :cell-style="getItemCellStyle"
                    :sort-config="{
                        defaultSort: { field: 'modifyDateTime', order: 'desc', orders: ['desc', 'asc', null] },
                        remote: true,
                    }"
                    stripe
                    :filter-config="{ remote: true }"
                    @filter-change="handleFilter($event, 'item')"
                    @sort-change="handleSortItem"
                    :data="tableDataItem"
                    show-header-overflow
                    v-loading="loadingItem"
                    class="tableItem"
                    header-align="center"
                >
                    <vxe-column
                        v-for="item in itemColumns"
                        :field="item.val"
                        :title="item.name"
                        :key="item.val"
                        :filters="item.filters"
                        :min-width="item.minWidth || '90px'"
                        show-overflow="tooltip"
                        sortable
                    >
                        <template #filter="{ $panel, column }" v-if="!checkFiltersParams.includes(item.val)">
                            <div>
                                <el-input
                                    ref="searchInput"
                                    class="my-input"
                                    type="type"
                                    v-for="(option, index) in column.filters"
                                    :key="index"
                                    v-model="option.data"
                                    @input="$panel.changeOption($event, !!option.data, option)"
                                />
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <span v-if="item.type == 'func'" :style="getStyle(item.val, scope.row[item.val])">
                                {{ item.funcBody(scope.row[item.val]) || '--' }}
                            </span>
                            <span v-else>
                                {{ getValue(scope.row[item.val]) }}
                            </span>
                        </template>
                    </vxe-column>
                </vxe-table>
                <RiskPagination :paging="pagingItem" @page-change="pageRet('item')"></RiskPagination>
            </div>
        </yh-dialog>
    </div>
</template>

<script lang="ts">
import RiskPagination from '@/common/components/risk-pagination.vue';
import RiskTable from '@/common/components/risk-table.vue';
import { dateFormat, timeFormat } from '@/utils/tools';
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import {
    getMappingType,
    queryDyDetail,
    queryDynamicEntry,
    queryDyTemplateDetail,
    queryEntryConfigDetail,
    querySpecialDetail,
    querySpecialEntry,
    queryStateDetail,
    querySyncDetail,
    querySyncParamDetail,
    querySyncTrendDetail,
} from '../api/item-monitor';
import * as moment from 'moment';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'ItemSyncDetail',
    components: { RiskTable, RiskPagination },
})
/**
 * syncExtraParams:同步额外请求参数
 */
export default class ItemSyncDetail extends Vue {
    @Prop()
    show: boolean;
    @Prop()
    info: any;
    @Prop()
    syncExtraParams: any;

    dateFormat = dateFormat;
    timeFormat = timeFormat;
    // 类别
    @Prop() riskEntryTypeObj: any;

    // 状态
    statusObj: any = {
        '0': '禁用',
        '1': '启用',
    };

    // 状态
    statusObjSpecial = {
        '0': '不支持',
        '1': '支持',
    };

    // 失效
    validObj: any = {
        '0': '失效',
        '1': '生效',
    };

    // 状态
    statusObjSync = {
        0: '失败',
        1: '成功',
    };

    // 参数
    paramObj = {
        '0': '特殊计算项',
        '1': '分母',
        '2': '动态维度模板',
        '3': '动态维度',
        '4': '其他',
    };

    sortObj = {}; // 实际排序参数
    // 条目状态
    itemStatusColumns = [
        { name: '条目编号', val: 'entryCode', align: 'left', filters: [{ data: '' }] },
        { name: '条目名称', val: 'entryName', minWidth: 140, filters: [{ data: '' }], align: 'left' },
        {
            name: '类别',
            val: 'riskEntryType',
            align: 'center',
            filters: [],
            type: 'func',
            funcBody: value => (value && value.trim() ? value + '类' : '--'),
        },
        {
            name: '状态',
            val: 'entryStatus',
            align: 'center',
            filters: this.changeObjToArr(this.statusObj),
            type: 'func',
            funcBody: value => this.statusObj[value],
        },
        {
            name: '是否生效',
            val: 'valid',
            align: 'center',
            filters: this.changeObjToArr(this.validObj),
            type: 'func',
            funcBody: value => this.validObj[value],
        },
        { name: '生效日期', val: 'beginDate', align: 'center', type: 'func', funcBody: value => dateFormat(value) },
        { name: '失效日期', val: 'endDate', align: 'center', type: 'func', funcBody: value => dateFormat(value) },
        { name: '更新人', val: 'modifyUser', align: 'left', filters: [{ data: '' }] },
        {
            name: '更新时间',
            val: 'modifyDateTime',
            align: 'center',
            minWidth: '140px',
            type: 'func',
            funcBody: value => this.handleDateAndTime(value),
        },
    ];

    // 条目状态参数
    statusParams = {
        entryCode: '',
        entryName: '',
        entryStatus: [],
        modifyUser: '',
        sort: 'D_MODIFY_DATETIME DESC',
        valid: [],
    };

    // 条目状态排序字段
    statusSortObj = {
        beginDate: 'D_BEGIN_DATE',
        endDate: 'D_END_DATE',
        entryCode: 'C_ENTRY_CODE',
        entryName: 'C_ENTRY_NAME',
        entryStatus: 'C_ENTRY_STATUS',
        modifyDateTime: 'D_MODIFY_DATETIME',
        modifyUser: 'C_MODIFY_USER_NAME',
        riskEntryType: 'C_ENTRY_TYPE',
        valid: 'C_VALID',
    };

    // 特殊计算项、分母
    specialOrDenominatorColumns: any[] = [
        { name: '风控编码', val: 'templateCode', align: 'left', filters: [{ data: '' }] },
        { name: '恒生编码', val: 'sourceCode', align: 'left', filters: [{ data: '' }] },
        { name: '资产名称', val: 'sourceName', minWidth: 220, align: 'left', filters: [{ data: '' }] },
        {
            name: '状态',
            val: 'supported',
            align: 'center',
            filters: this.changeObjToArr(this.statusObjSpecial),
            type: 'func',
            funcBody: value => this.statusObjSpecial[value],
        },
        { name: '原因', val: 'unsupportedReason', minWidth: 160, align: 'left', filters: [{ data: '' }] },
        { name: '相关条目', val: 'entryCount', align: 'center' },
        { name: '更新人', val: 'modifyUser', align: 'left', filters: [{ data: '' }] },
        {
            name: '更新时间',
            val: 'modifyDateTime',
            align: 'center',
            minWidth: 140,
            type: 'func',
            funcBody: value => this.handleDateAndTime(value),
        },
    ];

    specialColoumSortObj = {
        modifyDateTime: 'D_MODIFY_DATETIME',
        modifyUser: 'C_MODIFY_USER',
        sourceCode: 'C_SOURCE_CODE',
        sourceName: 'C_SOURCE_NAME',
        sourceType: 'C_SOURCE_TYPE',
        // status: 'C_STATUS',
        supported: 'SUPPORTED',
        templateCode: 'C_TEMPLATE_CODE',
        templateType: 'C_TEMPLATE_TYPE',
        unsupportedReason: 'UNSUPPORTED_REASON',
        entryCount: 'entryCount',
    };

    specialParams = {
        sort: 'D_MODIFY_DATETIME DESC',
        sourceCode: '',
        sourceName: '',
        supported: [],
        templateCode: '',
        type: '1', // 1-特殊计算,2-分母
        unsupportedReason: '',
        modifyUser: '',
        modifyDateTime: '', // 时间
    };

    // 动态维度、动态维度模板
    dynamicTempColumns = [
        { name: '编号', val: 'code', align: 'left', filters: [{ data: '' }] },
        { name: '名称', val: 'name', align: 'left', minWidth: 240, filters: [{ data: '' }] },
        {
            name: '状态',
            val: 'supported',
            align: 'center',
            filters: this.changeObjToArr(this.statusObjSpecial),
            type: 'func',
            funcBody: value => this.statusObjSpecial[value],
        },
        { name: '原因', val: 'unsupportedReason', minWidth: 140, align: 'left', filters: [{ data: '' }] },
        { name: '日志信息', val: 'logInfo', minWidth: 140, align: 'left', filters: [{ data: '' }] },
        { name: '相关条目', val: 'entryCount', align: 'center' },
        {
            name: '同步时间',
            val: 'syncDateTime',
            minWidth: 140,
            align: 'center',
            type: 'func',
            funcBody: value => this.handleDateAndTime(value),
        },
    ];

    dynamicTempSortObj = {
        code: 'TO_NUMBER(C_CODE)',
        name: 'C_NAME',
        logInfo: 'LOG_INFO',
        supported: 'SUPPORTED',
        syncDateTime: 'SYNC_DATE_TIME',
        unsupportedReason: 'UNSUPPORTED_REASON',
        entryCount: 'entryCount',
    };

    dynamicParams = {
        logInfo: '',
        sort: 'SYNC_DATE_TIME DESC',
        supported: [],
        templateCode: '',
        templateName: '',
        unsupportedReason: '',
    };

    // 条目同步概况、条目同步走势、条目同步参数
    itemSyncOverviewColumns = [
        { name: '条目编号', val: 'code', align: 'left', minWidth: 110, filters: [{ data: '' }] },
        { name: '条目名称', val: 'name', align: 'left', minWidth: 180, filters: [{ data: '' }] },
        {
            name: '类别',
            val: 'type',
            align: 'center',
            filters: [],
            type: 'func',
            funcBody: value => (value && value.trim() ? value + '类' : '--'),
        },
        {
            name: '状态',
            val: 'syncStatus',
            align: 'center',
            filters: this.changeObjToArr(this.statusObjSync),
            type: 'func',
            funcBody: value => this.statusObjSync[value],
        },
        // { name: '参数', val: 'paramDesc', minWidth: 160, align: 'center', filters: this.changeObjToArr(this.paramObj) },
        { name: '参数', val: 'paramDescDetail', minWidth: 160, align: 'center' },
        { name: '原因', val: 'unsupportedReason', minWidth: 160, align: 'left', filters: [{ data: '' }] },
        { name: '日志信息', val: 'logInfo', minWidth: 160, align: 'left', filters: [{ data: '' }] },
        {
            name: '同步时间',
            val: 'syncDateTime',
            minWidth: 140,
            type: 'func',
            align: 'center',
            funcBody: value => this.handleDateAndTime(value),
        },
    ];

    syncSortObj = {
        type: 'C_TYPE',
        code: 'TO_NUMBER(C_CODE)',
        logInfo: 'LOG_INFO',
        name: 'C_NAME',
        param: 'C_SYN_PARAM',
        paramDesc: 'C_SYN_PARAM_DESC',
        paramDescDetail: 'C_SYN_PARAM_DESC',
        supported: 'SUPPORTED',
        syncStatus: 'C_SYN_STATUS',
        syncDateTime: 'SYNC_DATE_TIME',
        unsupportedReason: 'UNSUPPORTED_REASON',
    };

    syncParams = {
        code: '',
        name: '',
        logInfo: '',
        sort: '',
        // sort: 'SYNC_DATE_TIME DESC',
        param: [],
        syncStatus: [],
        type: [], // 类别
        unsupportedReason: '',
    };

    // 条目字段
    itemColumns = [
        { name: '条目编号', val: 'entryCode', align: 'left', filters: [{ data: '' }] },
        { name: '条目名称', val: 'entryName', minWidth: 140, filters: [{ data: '' }], align: 'left' },
        {
            name: '类别', // type
            val: 'entryType',
            align: 'center',
            filters: [],
            type: 'func',
            funcBody: value => (value && value.trim() ? value + '类' : '--'),
        },
        {
            name: '状态',
            val: 'status',
            // entryStatus
            align: 'center',
            filters: this.changeObjToArr(this.statusObj),
            type: 'func',
            funcBody: value => this.statusObj[value],
        },
        {
            name: '是否生效',
            // valid
            val: 'validStatus',
            align: 'center',
            filters: this.changeObjToArr(this.validObj),
            type: 'func',
            funcBody: value => this.validObj[value],
        },
        { name: '生效日期', val: 'beginDate', align: 'center', type: 'func', funcBody: value => dateFormat(value) },
        { name: '失效日期', val: 'endDate', align: 'center', type: 'func', funcBody: value => dateFormat(value) },
        { name: '更新人', val: 'modifyUser', align: 'left', filters: [{ data: '' }] },
        {
            name: '更新时间',
            val: 'modifyDateTime',
            align: 'center',
            minWidth: '140px',
            type: 'func',
            funcBody: value => this.handleDateAndTime(value),
        },
    ];

    // 条目参数
    itemParams = {
        entryCode: '',
        entryName: '',
        entryTypeList: [],
        modifyUser: '',
        // sort: 'D_BEGIN_DATE DESC',
        sort: 'D_MODIFY_DATETIME DESC',
        sourceCode: '',
        statusList: [],
        type: '',
        validStatusList: [],
    };

    // 详情条目排序字段
    itemSortObj = {
        beginDate: 'D_BEGIN_DATE',
        endDate: 'D_END_DATE',
        entryCode: 'C_ENTRY_CODE',
        entryName: 'C_ENTRY_NAME',
        status: 'C_ENTRY_STATUS',
        modifyDateTime: 'D_MODIFY_DATETIME',
        modifyUser: 'C_MODIFY_USER',
        entryType: 'C_ENTRY_TYPE',
        validStatus: 'C_VALID',
    };

    // 条目配置
    entryConfigColumns = [
        {
            name: '类别',
            val: 'riskType',
            align: 'center',
            filters: [],
            minWidth: 180,
            type: 'func',
            funcBody: value => (value && value.trim() ? value + '类' : '--'),
        },
        { name: '恒生参数编号', val: 'paramType', minWidth: 200, align: 'left', filters: [{ data: '' }] },
        { name: '恒生参数名称', val: 'paramTypeName', minWidth: 200, filters: [{ data: '' }], align: 'left' },
        { name: '参数说明', val: 'paramDesc', align: 'left', minWidth: 180, filters: [{ data: '' }] },
        {
            name: '恒生值域',
            val: 'paramValue',
            align: 'left',
            filters: [{ data: '' }],
            minWidth: 180,
        },

        {
            name: '参数支持情况',
            val: 'supported',
            minWidth: 200,
            align: 'center',
            filters: [
                { label: '不支持', value: 0 },
                { label: '支持', value: 1 },
                { label: '部分支持', value: 2 },
            ],
        },
        {
            name: '风控映射类型',
            val: 'mappingType',
            align: 'center',
            filters: [],
            minWidth: 180,
        },
        { name: '映射risk实现', val: 'mappingImpl', minWidth: 180, align: 'left', filters: [{ data: '' }] },
        { name: '映射逻辑', val: 'mappingLogic', minWidth: 150, align: 'left', filters: [{ data: '' }] },
        { name: '创建人', val: 'createUser', minWidth: 150, align: 'left', filters: [{ data: '' }] },

        {
            name: '创建时间',
            val: 'createDateTime',
            align: 'center',
            minWidth: '160px',
            type: 'func',
            funcBody: value => this.handleDateAndTime(value),
        },
        { name: '更新人', val: 'modifyUser', align: 'left', minWidth: 140, filters: [{ data: '' }] },
        {
            name: '同步时间',
            val: 'modifyDateTime',
            align: 'center',
            minWidth: '160px',
            type: 'func',
            funcBody: value => this.handleDateAndTime(value),
        },
    ];

    // 条目配置参数
    entryConfigParams = {
        createUser: '',
        mappingImpl: '', // 风控映射实现
        mappingLogic: '', // 映射逻辑
        mappingType: '', // 风控映射类型
        mappingTypes: [], // 风控映射类型
        modifyUser: '',
        paramDesc: '', // 参数说明
        paramType: '', // 恒生参数编号
        paramTypeName: '', // 恒生参数名称
        paramValue: '',
        paramValues: [], // 恒生值域
        riskTypes: [],
        sort: 'D_MODIFY_DATETIME DESC',
        supported: [0, 1, 2],
    };

    // 条目配置排序字段
    entryConfigSortObj = {
        paramType: 'C_PARAM_TYPE',
        paramTypeName: 'C_PARAM_TYPE_NAME',
        paramDesc: 'C_PARAM_INFO',
        paramValue: 'C_PARAM_VALUE_SHOW',
        mappingType: 'C_MAPPING_TYPE',
        mappingImpl: 'C_MAPPING_IMPL',
        mappingLogic: 'C_MAPPING_LOGIC',
        createUser: 'C_DT_CT_USER',
        createDateTime: 'D_CREATE_DATETIME', // 创建时间
        modifyUser: 'D_DT_MD_USER',
        modifyDateTime: 'D_MODIFY_DATETIME',
        supported: 'C_IS_SUPPORT',
        riskType: 'C_RISK_TYPE',
    };

    isFullScreen: boolean = true;
    sortProp: string = 'modifyDateTime';
    sortOrder: string = 'desc'; // 排序方式
    columns: any[] = [];
    tableData: any[] = [];
    tableDataItem: any[] = [];
    loading: boolean = false;
    loadingItem: boolean = false;
    queryParams: any = {};
    checkFiltersIndex: any[] = []; // 复选框筛选
    // 复选框参数
    checkFiltersParams = [
        'riskEntryType',
        'entryStatus',
        'valid',
        'supported',
        // 'paramDesc',
        'syncStatus',
        'type',
        'validStatus',
        'status',
        'entryType',
        'mappingType',
        'supported',
        'riskType',
    ]; // 注意添加
    // 'validStatus','status',  'entryType'为明细条目中特别添加

    paging: pages = {
        total: 0,
        pageSize: 10,
        currentPage: 1,
    };
    pagingItem: pages = {
        total: 0,
        pageSize: 10,
        currentPage: 1,
    };
    mappingTypes: any[] = [];
    key: number = 0;
    // 改变筛选按钮
    iconDom = null;
    rowKey: number = 0;

    async mounted() {
        // console.log(this.riskEntryTypeObj, 'riskEntryTypeObj2');
        let name = this.info.name;
        if (name == '条目状态') {
            // 注意：筛选条件渲染问题
            this.columns = this.itemStatusColumns.map(item => {
                if (item.val == 'riskEntryType') {
                    item.filters = this.changeObjToArr(this.riskEntryTypeObj);
                }
                return item;
            });
            this.checkFiltersIndex = [2, 3, 4];
            this.sortObj = this.statusSortObj;
            this.queryParams = this.statusParams;
        } else if (name == '特殊计算项') {
            this.handleItemColumns();
            this.columns = this.specialOrDenominatorColumns;
            this.checkFiltersIndex = [3, 8, 9, 10];
            this.sortObj = this.specialColoumSortObj;
            this.queryParams = this.specialParams;
        } else if (name == '分母') {
            this.handleItemColumns();
            this.columns = this.specialOrDenominatorColumns;
            this.checkFiltersIndex = [3, 8, 9, 10];
            this.sortObj = this.specialColoumSortObj;
            this.queryParams = this.specialParams;
        } else if (name == '动态维度') {
            this.handleItemColumns();
            this.columns = this.dynamicTempColumns;
            this.checkFiltersIndex = [2, 7, 8, 9];
            this.sortObj = this.dynamicTempSortObj;
            this.queryParams = this.dynamicParams;
            this.sortProp = 'syncDateTime';
        } else if (name == '动态维度模板') {
            this.handleItemColumns();
            this.columns = this.dynamicTempColumns;
            this.checkFiltersIndex = [2, 7, 8, 9];
            this.sortObj = this.dynamicTempSortObj;
            this.queryParams = this.dynamicParams;
            this.sortProp = 'syncDateTime';
        } else if (name == '条目配置参数概况') {
            await this.queryMappingType();
            this.checkFiltersParams.splice(4, 1);
            this.columns = this.entryConfigColumns;
            this.columns = this.entryConfigColumns.map(item => {
                if (item.val == 'mappingType') {
                    item.filters = this.mappingTypes;
                }
                if (item.val == 'riskType') {
                    item.filters = this.changeObjToArr(this.riskEntryTypeObj);
                }
                return item;
            });
            this.checkFiltersIndex = [0, 5, 6];
            this.sortObj = this.entryConfigSortObj;
            this.queryParams = this.entryConfigParams;
        } else {
            this.columns = this.itemSyncOverviewColumns.map(item => {
                if (item.val == 'type') {
                    item.filters = this.changeObjToArr(this.riskEntryTypeObj);
                }
                return item;
            });
            // this.checkFiltersIndex = [2, 3, 4];
            this.checkFiltersIndex = [2, 3];
            this.sortObj = this.syncSortObj;
            this.sortProp = 'syncDateTime';
            if (name == '条目同步概况') {
                this.queryParams = this.syncParams;
            } else if (name == '条目同步走势') {
                this.queryParams = { ...this.syncParams, ...this.syncExtraParams };
            } else {
                this.syncParams.sort = 'SYNC_DATE_TIME DESC';
                // 条目同步参数
                this.queryParams = { ...this.syncParams, ...this.syncExtraParams };
                console.log(this.syncParams, this.syncExtraParams, 'pppppppppppppppppp');
            }
        }

        await this.getData();
        // 筛选按钮处理
        this.changeTable();
    }

    @Watch('isFullScreen', { immediate: true, deep: true })
    onWatchIsFullScreen() {
        this.key++;
    }

    @Watch('info', { immediate: true, deep: true })
    onWatchInfo(newData, oldData) {
        if (JSON.stringify(newData) !== JSON.stringify(oldData)) {
            this.getTitle();
            console.log(newData, 'getTitle');
        }
    }

    async queryMappingType() {
        await getMappingType().then(res => {
            // this.mappingTypes = res;
            res.forEach(ele => {
                let obj = { label: ele, value: ele };
                this.mappingTypes.push(obj);
            });
        });
    }

    // 处理条目字段"类别"
    handleItemColumns() {
        this.itemColumns = this.itemColumns.map(item => {
            if (item.val == 'entryType') {
                item.filters = this.changeObjToArr(this.riskEntryTypeObj);
            }
            return item;
        });
    }

    changeTable() {
        this.$nextTick(() => {
            if (!this.iconDom) {
                this.iconDom = document.querySelectorAll('.vxe-icon--funnel');
                for (let i = 0; i < this.iconDom.length; i++) {
                    if (!this.checkFiltersIndex.includes(i)) {
                        this.iconDom[i].className = 'vxe-filter--btn el-icon-search';
                    }
                }
            }
        });
    }

    // 获取表格数据(上面)
    async getData() {
        let name = this.info.name;
        this.loading = true;
        let obj: any = {};
        let params = {
            ...this.queryParams,
            paging: {
                currentPage: this.paging.currentPage,
                pageSize: this.paging.pageSize,
            },
        };
        const oldTotal = this.paging.total;
        try {
            if (name == '条目状态') {
                obj = await queryStateDetail({
                    ...params,
                });
            } else if (['特殊计算项', '分母'].includes(name)) {
                obj = await querySpecialDetail({
                    ...params,
                    type: name == '分母' ? '2' : '1',
                });
            } else if (name == '动态维度') {
                obj = await queryDyDetail({
                    ...params,
                });
            } else if (name == '动态维度模板') {
                obj = await queryDyTemplateDetail({
                    ...params,
                });
            } else if (name == '条目同步概况') {
                obj = await querySyncDetail({
                    ...params,
                });
            } else if (name == '条目同步走势') {
                obj = await querySyncTrendDetail({
                    ...params,
                });
            } else if (name == '条目同步参数') {
                obj = await querySyncParamDetail({
                    ...params,
                });
            } else if (name == '条目配置参数概况') {
                obj = await queryEntryConfigDetail({
                    ...params,
                });
            }
            // 当刷新明细数据，总数变化时，同时刷新对应模块数据
            // if (oldTotal !== obj?.total) {
            this.$emit('getDetailDataChange', name);
            this.rowKey++;
            // }
        } finally {
            this.tableData = obj?.list || [];
            this.paging.total = obj?.total || 0;
            this.loading = false;
            if (this.tableData[0] && ['特殊计算项', '分母', '动态维度', '动态维度模板'].includes(name)) {
                (this.$refs.tTable as any).setCurrentRow(this.tableData[0]);
                this.itemParams.sourceCode = this.tableData[0].sourceCode;
                this.getDataItem();
            }
        }
    }

    // 获取明细条目
    async getDataItem() {
        let name = this.info.name;
        this.loadingItem = true;
        let obj: any = {};
        let params = {
            ...this.itemParams,
            paging: {
                currentPage: this.pagingItem.currentPage,
                pageSize: this.pagingItem.pageSize,
            },
        };
        try {
            if (name == '条目状态') {
                obj = await queryStateDetail({
                    ...params,
                });
            } else if (['特殊计算项', '分母'].includes(name)) {
                obj = await querySpecialEntry({
                    ...params,
                    type: name == '分母' ? '2' : '1',
                });
            } else if (name == '动态维度' || name == '动态维度模板') {
                obj = await queryDynamicEntry({
                    ...params,
                    type: name == '动态维度' ? '1' : '2',
                });
            }
        } finally {
            this.tableDataItem = obj?.list || [];
            this.pagingItem.total = obj?.total || 0;
            this.loadingItem = false;
        }
    }

    nameIndexPojo = {
        特殊计算项: 0,
        分母: 1,
        动态维度模板: 2,
        动态维度: 3,
        其它: 4,
    };

    getTitle() {
        let title;
        let name = this.info.name;
        if (['特殊计算项', '分母', '动态维度', '动态维度模板'].includes(name)) {
            title = `${this.info.name}-明细 (支持：${this.info.successNum}个 不支持：${this.info.errorNum}个)`;
        } else if (name == '条目同步概况') {
            title = `${this.info.name}-明细 (成功：${this.info.successNum}次 失败：${this.info.errorNum}次)`;
        } else if (name == '条目状态') {
            title = `${this.info.name}-明细 (启用：${this.info.successNum}个 禁用：${this.info.errorNum}个)`;
        } else if (name == '条目同步走势') {
            title = `${this.info.name}-明细 (${this.info.seriesName}:${this.info.data}次  ${this.info.time})`;
        } else if (name == '条目同步参数') {
            let index = this.nameIndexPojo[this.info.xname];
            console.log(this.info, index, 'kkkkkkkkkkkk');

            let succeedTotal = 0;
            let failedTotal = 0;
            let percent1: any = 0;
            let percent2: any = 0;
            if (this.info.succeed) {
                for (let index = 0; index < this.info.succeed.length; index++) {
                    const element = this.info.succeed[index];
                    succeedTotal += element;
                }
                if (succeedTotal == 0 || this.info.succeed[index] == 0) {
                    percent1 = 0.0;
                } else {
                    percent1 = ((this.info.succeed[index] / succeedTotal) * 100).toFixed(2);
                }
            }

            if (this.info.failed) {
                for (let index = 0; index < this.info.failed.length; index++) {
                    const element = this.info.failed[index];
                    failedTotal += element;
                }
                if (failedTotal == 0 || this.info.failed[index] == 0) {
                    percent2 = 0.0;
                } else {
                    percent2 = ((this.info.failed[index] / failedTotal) * 100).toFixed(2);
                }
            }
            if (this.info.seriesIndex) {
                title = `条目同步参数-明细 (${this.info.name}-${this.info.seriesName}：${this.info.succeed[index]}次 ${percent1}%)`;
            } else {
                title = `条目同步参数-明细 (${this.info.name}-${this.info.seriesName}：${this.info.failed[index]}次 ${percent2}%)`;
            }

            // title = `条目同步参数-明细 (${this.info.name}-${this.info.seriesName}：${this.info.data}次 ${this.info.percent})`;
        } else if (name == '条目配置参数概况') {
            title = `条目配置参数概况-明细 (支持：${this.info.successNum}个 不支持：${this.info.errorNum}个 部分支持：${this.info.partNum}个)`;
        }
        return title;
    }

    /**
     * 点击行
     */
    handleRow({ row }) {
        this.itemParams.sourceCode = row.sourceCode;
        this.getDataItem();
    }

    /**
     * 表头筛选
     */
    handleFilter(obj, type) {
        if (type == 'detail') {
            this.paging.currentPage = 1;
            this.handleFilterDeal(obj, this.queryParams);
            this.getData();
        } else {
            this.pagingItem.currentPage = 1;
            this.handleFilterDeal(obj, this.itemParams);
            this.getDataItem();
        }
    }

    handleFilterDeal(obj, queryParams) {
        let filterList = obj.filterList;
        let property = obj.property;
        if (this.checkFiltersParams.includes(property)) {
            if (property == 'paramDesc') {
                queryParams['param'] = [];
            } else if (['validStatus', 'status', 'entryType'].includes(property)) {
                // 显示字段和筛选字段有List的区别
                queryParams[property + 'List'] = [];
            } else if (['mappingType', 'riskType'].includes(property)) {
                queryParams[property + 's'] = [];
            } else {
                queryParams[property] = [];
            }
        } else {
            if (property == 'paramDescDetail') {
                queryParams['param'] = [];
            } else {
                queryParams[property] = '';
            }
        }

        if (filterList.length) {
            filterList.forEach(ele => {
                let property = ele.property;
                if (this.checkFiltersParams.includes(property)) {
                    if (property == 'paramDesc') {
                        // 页面显示的是paramDesc字段值   但是查询的是参数代码param
                        queryParams['param'] = ele.values;
                    } else if (['validStatus', 'status', 'entryType'].includes(property)) {
                        queryParams[property + 'List'] = ele.values;
                    } else if (['mappingType', 'riskType'].includes(property)) {
                        queryParams[property + 's'] = ele.values;
                    } else {
                        queryParams[ele.property] = ele.values;
                    }
                } else {
                    if (property == 'paramDescDetail') {
                        // 页面显示的是paramDescDetail字段值   但是查询的是参数代码param
                        queryParams['param'] = [ele?.datas[0] || ''];
                    } else {
                        queryParams[ele.property] = ele?.datas[0] || '';
                    }
                }
            });
        }
    }

    /**
     * 表头排序
     */
    handleSort(column: any) {
        this.paging.currentPage = 1;
        this.sortProp = column.property;
        this.sortOrder = column.order;
        const sortType = column.order == 'asc' ? 'ASC' : column.order == 'desc' ? 'DESC' : '';
        let sort = '';
        if (sortType) {
            sort = this.handleSortField(column.property, sortType, this.sortObj);
        }
        this.queryParams.sort = sort;
        this.getData();
    }

    // 明细条目
    handleSortItem(column: any) {
        this.pagingItem.currentPage = 1;
        const sortType = column.order == 'asc' ? 'ASC' : column.order == 'desc' ? 'DESC' : '';
        let sort = '';
        if (sortType) {
            sort = this.handleSortField(column.property, sortType, this.itemSortObj);
        }
        this.itemParams.sort = sort;
        this.getDataItem();
    }

    // 获取排序字段
    handleSortField(name: string, order: string, sortObj): string {
        let value = '';
        let field = sortObj[name];
        value = field + ' ' + order;
        return value;
    }

    // 分页回调
    pageRet(type: string) {
        if (type == 'detail') {
            this.getData();
        } else if (type == 'item') {
            this.getDataItem();
        }
    }

    // 关闭窗口
    close() {
        this.$emit('item-sync-detail');
    }

    handleColumns(column) {
        return column.property != 'riskEntryType';
    }

    // 对象转数组(仅用于过滤)
    changeObjToArr(obj) {
        let data = [];
        for (let key in obj) {
            data.push({ label: obj[key], value: key });
        }
        // console.log(data, 'data');
        return data;
    }

    getStyle(val: string, value: string) {
        let color = '';
        if (['supported', 'entryStatus', 'valid', 'syncStatus', 'validStatus', 'status'].includes(val)) {
            color = value == '0' ? 'red' : value == '1' ? 'green' : '';
        }
        return { color: color };
    }

    handleDateAndTime(values) {
        let retValue = '--';
        if (values) {
            let date = String(values).substring(0, 8);
            let time = String(values).substring(8);
            retValue = dateFormat(date) + '  ' + timeFormat(time);
        }
        return retValue;
    }

    // 字段居中、左右对齐
    getAlign(ele) {
        let obj = this.columns.find(item => item.val == ele.val);
        return obj?.align || 'right';
    }

    getCellStyle({ column }) {
        let value = 'text-align:right';
        let obj = this.columns.find(item => item.val == column.property);
        if (obj) {
            value = 'text-align: ' + (obj.align || 'right');
        }
        return value;
    }

    // 相关条目字段样式
    getEntryCountStyle(supported, value) {
        if (value > 0 && supported == '1') {
            return { 'text-decoration': 'underline', cursor: 'default' };
        } else {
            return {};
        }
    }

    // 对字段显示处理
    getValue(value: any) {
        return value === 0 || (value && (value + '').trim()) ? value : '--';
    }

    // 明细条目
    getItemCellStyle({ column }) {
        let value = 'text-align:right';
        let obj = this.itemColumns.find(item => item.val == column.property);
        if (obj) {
            value = 'text-align: ' + (obj.align || 'right');
        }
        return value;
    }

    // 全屏点击
    onFullScreen() {
        this.isFullScreen = !this.isFullScreen;
    }
}
</script>

<style lang="scss" scoped>
@import '@/pages/report/styles/common';

.title-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 4px solid #2288ff;
    border-radius: 50%;
    margin-right: 4px;
}
.title-text {
    display: inline-block;
    font-weight: 900;
}
.my-input {
    margin: 4px;
    width: 96%;
}
/deep/ .el-dialog {
    .el-dialog__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        padding: 4px !important;
        .el-dialog__title {
            font-size: 16px;
            color: #333333;
        }
        .el-dialog__headerbtn .el-dialog__close {
            font-size: 24px;
            color: #515151;
        }
    }
    .el-dialog__body {
        max-height: 100%;
    }
}
.full-screen /deep/ .el-dialog {
    left: 0px !important;
    top: 0px !important;
}
// .not-full-screen /deep/ .el-dialog {
//     margin: auto;
// }
.flex1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn1 {
        font-size: 24px;
        margin: 0 10px;
        cursor: pointer;
    }
    .btn2 {
        font-size: 24px;
        cursor: pointer;
        width: 35px;
        height: 28px;
        background-image: url('../images/entry-monitor/close.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}
/deep/ .el-dialog__wrapper {
    overflow: hidden;
}
.top-content /deep/ .vxe-table .vxe-table--body-wrapper.body--wrapper {
    // height: fit-content;
    // max-height: calc(47vh - 115px);
    height: calc(47vh - 135px);
}
.content /deep/ .vxe-table .vxe-table--body-wrapper.body--wrapper {
    // height: fit-content;
    // max-height: calc(94vh - 130px);
    height: calc(94vh - 130px);
}

.table /deep/ .vxe-cell .vxe-cell--title {
    font-size: 14px;
}

/deep/.vxe-table {
    .vxe-table--filter-wrapper {
        .vxe-table--filter-body {
            height: 40%;
            max-height: 100px;
            padding-bottom: 0;
        }
    }
}
</style>
